<template>
	<view>
		<uni-popup ref="sharePopup" type="bottom" :hideBar="hideBar" maskClick @change="visibleChange">
			<view class="share-popup">
				<view class="popup-title">分享至</view>
				<view class="popup-content">
					<button open-type="share" class="share-btn">
						<image src="/static/wechat-icon.png" mode="aspectFill" class="share-icon"></image>
						<text class="share-to">微信聊天</text>
					</button>
					<button  @click="onTimelineShare" class="share-btn">
						<image src="/static/timeline-icon.png" mode="aspectFill" class="share-icon"></image>
						<text class="share-to">朋友圈</text>
					</button>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="posterPopup" type="bottom" maskClick>
			<view class="poster-popup">
				<text class="iconfont icon-close1 close-btn" @click="$refs['posterPopup'].close()"></text>
				<image :src="finalPath" mode="widthFix" class="poster-img"></image>
				<view class="poster-save-btn" @click="savePoster">保存海报后分享</view>
			</view>
		</uni-popup>
		<view class="hideCanvasView">
			<canvas class="hideCanvas" canvas-id="default_PosterCanvasId" :style="{width: (poster.width||0) + 'px', height: (poster.height||0) + 'px'}"></canvas>
		</view>
	</view>
</template>

<script>
	import {authorize} from '@/common/common.js'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import { getSharePoster } from '@/common/QS-SharePoster/QS-SharePoster.js'
	export default {
		name:'share-popup',
		components:{
			uniPopup
		},
		props:{
			groupId:'',
			visible:{
				type: Boolean,
				default:false
			},
			hideBar:{
				type: Boolean,
				default:false
			}
		},
		data() {
			return {
				finalPath:'',
				poster:{
					finalPath:''
				},
				posterVisible:false,
				canvasId: 'default_PosterCanvasId'
			}
		},
		watch:{
			'visible':async function(val){
				if(val){
					let data=await 
					this.getShareInfo().then(res=>{
						this.$refs['sharePopup'].open()
					},
					()=>{
						this.$emit('update:visible', false)
					})
				} else {
					this.$refs['sharePopup'].close()
				}
			},
			'groupId':function(val){
				this.finalPath=''
			}
		},
		methods:{
		 	async getShareInfo(){
				let data = await this.$api.getShareInfo({group_id:this.groupId})
				this.shareInfo=data
				this.$emit('init',data.wx_friend_share_info)
				return data
			},
			close(){
				this.$emit('update:visible', false)
				this.$refs['sharePopup'].close()
			},
			visibleChange({show}){
				this.$emit('update:visible', show)
			},
			onTimelineShare(){
				if(this.finalPath){
					this.$refs['posterPopup'].open()
				}else{
					uni.showLoading({
						title: '生成海报中...',
						mask: true
					})
					this.createPoster().then(()=>{
						uni.hideLoading()
						this.$refs['posterPopup'].open()
					},
					()=>{
						uni.hideLoading()
						uni.showToast({
							icon:'none',
							title:'海报生成失败'
						})
					}).catch(()=>{
						uni.hideLoading()
						uni.showToast({
							icon:'none',
							title:'海报生成失败'
						})
					})
				}
				
			},
			async createPoster(){
				let info=this.shareInfo.wx_circle_share_info
				const d = await getSharePoster({
					_this: this, //若在组件中使用 必传
					type: 'testShareType',
					backgroundImage:info.poster_url,
					drawArray: ({
						bgObj,
						type,
						bgScale
					}) => {
						return[
							// {
							// 	type:'image',
							// 	url:info.poster_url,
							// 	dx:0,
							// 	dy:0,
							// 	dWidth:750*bgScale,
							// 	dHeight:1334*bgScale,
							// },
							{
								type:'image',
								url:info.avatar_url,
								dx:75*bgScale,
								dy:90*bgScale,
								dWidth:120*bgScale,
								dHeight:120*bgScale,
								circleSet:true
							},
							{
								type:'image',
								url:info.goods_img_url,
								dx:75*bgScale,
								dy:280*bgScale,
								dWidth:600*bgScale,
								dHeight:600*bgScale,
								roundRectSet:{
									r:10*bgScale
								}
							},
							{
								type:'image',
								url:info.qr_code_url,
								dx:500*bgScale,
								dy:1084*bgScale,
								dWidth:200*bgScale,
								dHeight:200*bgScale,
								circleSet:true
							},
							{
								type:'text',
								text:info.nick_name,
								size:36*bgScale,
								color:'#fff',
								textBaseline:'top',
								dx:225*bgScale,
								dy:96*bgScale
							},
							{
								type:'text',
								text:info.title,
								size:36*bgScale,
								color:'#FFE392',
								textBaseline:'top',
								dx:225*bgScale,
								dy:156*bgScale
							},
							{
								type:'text',
								text:info.goods_name,
								size:26*bgScale,
								color:'#FFFFFF',
								alpha:0.7,
								textAlign:'center',
								textBaseline:'top',
								dx:375*bgScale,
								dy:910*bgScale,
								lineFeed:{
									maxWidth:600*bgScale,
									lineHeight:28*bgScale
								}
								
							},
							
						]
					},
					// imagesArray: ({bgObj, type, bgScale}) => { 
					//   return [{
					// 	url: 'https://cdn.zhixianggo.com/config/4e7b0d346429874dd66af2fcee2882e8.jpg',
					// 	dx: 500*bgScale,
					// 	dy: 1084*bgScale,
					// 	infoCallBack(imageInfo) { //接受自身的图片信息对象
					// 		return {  // 需return新参数， 会覆盖原先的参数
					// 			dWidth: imageInfo.width*bgScale,
					// 			dHeight: imageInfo.height*bgScale
					// 		}
					// 	}
					//   }]
					// },
					// backgroundImage:info.poster_url,
					// imagesArray:[{
					// 	url:info.qr_code_url,
					// 	dx:Number(info.x_coordinate),
					// 	dy:Number(info.y_coordinate)
					// }],
					setCanvasWH: ({bgObj,type,bgScale}) => {
						console.log(bgObj,bgScale)// 为动态设置画布宽高的方法，
						this.poster = bgObj
					},
					posterCanvasId: this.canvasId,	//canvasId
					delayTimeScale: 20, //延时系数
				})
				
				this.poster.finalPath = d.poster.tempFilePath
				this.finalPath=d.poster.tempFilePath
				console.log(this.poster.finalPath)
				return d
			},
			savePoster(){
				authorize('writePhotosAlbum',()=>{
					uni.saveImageToPhotosAlbum({
						filePath: this.poster.finalPath,
						success(res) {
							uni.showToast({
								title:'保存成功'
							});
						}
					})
				},'请在授权中允许使用相册')
				
			}
		}
	}
</script>

<style lang="scss" scoped>
.share-popup{
	position: relative;
	width: 100%;
	padding:40rpx 0 0;
	padding-bottom: calc(50rpx + var(--safe-area-inset-bottom));
	border-radius: 10rpx 10rpx 0 0;
	background-color: #fff;
	text-align: center;
	.popup-title{
		margin-bottom: 20rpx;
		font-size: 36rpx;
		font-weight: 600;
	}
	.popup-content{
		display: flex;
	}
	.share-btn{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		flex:1;
		height: auto;
		width: auto;
		font-size: 24rpx;
		color: #666;
		background-color: #fff;
		border:none;
		&::after{
			border:none;
		}
	}
	.share-icon{
		width: 140rpx;
		height: 140rpx;
		// border:1px solid rgba(219,219,219,1);
		border-radius:100%;
		margin-bottom: 10rpx;
	}
	.close-icon{
		position: absolute;
		left: 50%;
		bottom:-90rpx;
		transform: translateX(-50%);
		font-size: 50rpx;
		color: #fff;
	}
}
.poster-popup{
	position: relative;
	width: 100%;
	padding:60rpx 0 var(--safe-area-inset-bottom);
	border-radius: 10rpx 10rpx 0 0;
	background-color: #fff;
	text-align: center;
	.poster-img{
		// display: block;
		margin: 0 auto 50rpx;
		width: 320rpx;
	}
	.poster-save-btn{
		width: 100%;
		height: 98rpx;
		line-height: 98rpx;
		font-size: 36rpx;
		color: #fff;
		background-color: #E7404A;
	}
	.close-btn{
		position: absolute;
		top:20rpx;
		right: 20rpx;
		font-size: 50rpx;
		color:#b1b1b1;
	}
}
.hideCanvasView {
	position: relative;
}

.hideCanvas {
	position: fixed;
	top: -99999upx;
	left: -99999upx;
	z-index: -99999;
}
</style>
